<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}博客系统{% endblock %}</title>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">

    <!-- 引入脚本 -->
    <script src="{{ url_for('static', filename='jquery/jquery-3.7.1.min.js') }}"></script>
    <script src="{{ url_for('static', filename='bootstrap/js/bootstrap.min.js') }}"></script>

    {% block head %}{% endblock %}

<style>
    .navbar-nav {
        margin-left: 30px;
    }

    .navbar-custom {
        background-color: seashell;
        border-color:whitesmoke;
    }

    .navbar-custom .navbar-brand,
    .navbar-custom .nav > li > a {
        color: black;
    }

    .navbar-custom .nav > li > a:hover,
    .navbar-custom .nav > li.active > a {
        color: blueviolet;
    }
    .footer {
            background-color: #f8f9fa;
            padding: 15px 0;
            border-top: 1px solid #dee2e6;
    }
    body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }
    main {
        flex-grow: 1;
        padding-top: 20px;
    }

</style>

</head>
<body>


   <!-- 主导航栏 -->
<nav class="navbar navbar-default navbar-custom" style="margin-bottom: 0;">
    <div class="container">
        <!-- 标题和折叠按钮 -->
        <div class="navbar-header ">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/" style="font-family: 华文行楷; font-size: 30px; color: black">L i k t 博 客 </a>
        </div>

        <!-- 折叠内容区域 -->
        <div class="collapse navbar-collapse" id="navbar-collapse">
            <!-- 左侧导航项 -->
            <ul class="nav navbar-nav">
                <li class="{% if request.path == '/' %}active{% endif %}">
                    <a href="{{ url_for('blog.index') }}">首页</a>
                </li>
                <li class="{% if 'categor' in request.path %}active{% endif %}">
                    <a href="{{ url_for('blog.categories') }}">分类</a>
                </li>
                <li class="{% if 'topic' in request.path %}active{% endif %}">
                    <a href="{{ url_for('blog.topics') }}">专题</a>
                </li>
                <li class="{% if 'comment' in request.path %}active{% endif %}">
                    <a href="{{ url_for('blog.comment') }}">留言板</a>
                </li>
            </ul>

            <!-- 右侧用户/登录按钮 -->
            <ul class="nav navbar-nav navbar-right">
                {% if user %}
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                            {{ user.username }} <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
{#                            <li><a href="#">个人中心</a></li>#}
                            <li><a href="{{ url_for('auth.logout') }}">退出登录</a></li>
                        </ul>
                    </li>
                {% else %}
                    <li>
                        <a class="btn btn-outline-primary" style="margin-top: 8px; margin-right: 10px;"
                           href="{{ url_for('auth.login') }}" target="_blank">登录后台</a>
                    </li>
                {% endif %}
            </ul>
        </div>
    </div>
</nav>

    <main class="container" style="max-width: 900px; margin: 0 auto; padding: 10px 10px 30px 30px;background-color: white;">
        {% block content %}{% endblock %}
    </main>

    <!-- 页脚 -->
    <footer class="footer text-center">
        <div class="container">
            <span class="text-muted">© {{ current_year }} 我的博客 - 基于 Flask 的个人博客系统</span>
        </div>
    </footer>

</body>
</html>
